<template>
  <a-list item-layout="horizontal"
          :data-source="store.state.planList">
    <template v-slot:renderItem="{ item }">
      <a-list-item>
        <a-list-item-meta :description="`耗时${item.time}h`">
          <template v-slot:title>
            <div>{{item.content}}</div>
            <span>{{formatDate(item.date)}}</span>
          </template>
        </a-list-item-meta>
        <template v-slot:actions>
          <a @click="deletePlan(item)">完成</a>
        </template>
      </a-list-item>
    </template>
  </a-list>
</template>
<script lang="ts">
  import { createVNode } from 'vue'
  import { Options, Vue } from "vue-class-component";
  import { getPlanList } from "@/api/index";
  import { useStore } from "vuex";
  import * as types from "@/store/action.types";
  import { message, Modal } from "ant-design-vue";
  import moment from "moment";
  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
  @Options({
    component: {ExclamationCircleOutlined}
  })
  export default class Home extends Vue {
    store = useStore();
    async mounted() {
      await this.store.dispatch(types.GET_PLAN_LIST);
    }
    private async getPlanList() {
      const result = await getPlanList();
    }
    private formatDate(date: string) {
      return moment(date).format("YYYY-MM-DD HH:mm:ss");
    }
    private deletePlan(item: Object) {
      Modal.confirm({
        title: "确定要完成吗?",
        icon: createVNode(ExclamationCircleOutlined),
        content: createVNode("div", { style: "color:red;" }, "完成将删除此内容"),
        onOk: async () => {
          await this.store.dispatch(types.DELETE_PLAN, item);
          message.success("操作成功");
          await this.store.dispatch(types.GET_PLAN_LIST);
        },
      });
    }
  }
</script>